<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script type="text/javascript" src="../../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.js"></script>
    <script type="text/javascript" src="../../js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="../../js/axios-0.21.0.js"></script>
    <script type="text/javascript" src="../../js/qs-6.9.4.js"></script>
    <style>
        /* Add your custom styles here */
        .navbar-brand {
            font-weight: bold;
        }

        .navbar-text {
            margin-right: 15px;
        }

        .navbar-nav > li > a {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .navbar-right {
            margin-right: -15px;
        }

        .panel-heading {
            background-color: #f5f5f5;
            border-color: #ddd;
            color: #333;
            padding: 10px 15px;
        }

        .panel-body {
            padding: 15px;
        }

        .panel-footer {
            background-color: #f5f5f5;
            border-color: #ddd;
            padding: 10px 15px;
        }

        table {
            width: 100%;
            margin-bottom: 20px;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 8px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }

        /* 新增样式 */
        #app {
            margin: 0 auto;
            width: 80%; /* 调整宽度 */
            padding-top: 50px; /* 添加顶部空白，避免导航栏遮挡内容 */
        }

    </style>
</head>

<body>
<div id="app">
    <div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a href="/front/main.html" class="navbar-brand">在线珠宝商城</a>
            </div>
            <span v-if="user !== null" class="navbar-text">欢迎您：<a href="">{{user.userName}}</a></span>
            <ul v-if="user === null" class="nav navbar-nav">
                <li><a href="../login.html" class="navbar-link"><span class="text-primary">登录</span></a></li>
                <li class="divider"></li>
                <li><a href="../register.html" class="navbar-link"><span class="text-primary">注册</span></a></li>
            </ul>
            <ul class="nav navbar-nav" v-if="user !== null">
                <li><a href="#" @click.prevent="logout" class="navbar-link"><span class="text-primary">退出登录</span></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="cart/cart.html">
                        <svg height="15" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 489 489"
                             style="enable-background:new 0 0 489 489;" xml:space="preserve">
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div style="width: 1300px">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4>订单详情信息</h4>
            </div>
            <div class="panel-body">
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th>订单号：{{orderId}}</th>
                        <th colspan="2">订单金额 ￥：{{total}}</th>
                        <th colspan="2">订单状态：{{status}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in orderItems">
                        <td>{{item.productName}}</td>
                        <td>单价:￥{{item.price}}</td>
                        <td>优惠价:￥{{item.jprice}}</td>
                        <td>商品数量：{{item.count}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="panel-footer"></div>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            user: null,
            orderId: "",
            status: "",
            total: "",
            orderItems: {}
        },
        created() {
            let params = new URLSearchParams(window.location.search);
            this.orderId = params.get('orderId');
            this.total = params.get('totalMoney');
            this.status = params.get('status');
            this.init();
        },
        methods: {
            init() {
                axios.get('/user').then(res => {
                    if (res.data.data === null) {
                        alert("请先登录！");
                        location.href = '../../login.html';
                    } else {
                        this.user = res.data.data;
                        this.getOrderItem();
                    }
                });
            },
            getOrderItem() {
                axios.get("/orderItem/findOrderItemByOrderId/" + this.orderId)
                    .then(resp => {
                        this.orderItems = resp.data.orderItems;
                    })
            },
            logout(){
                axios.get('/user/logout').then(res => {
                    alert('退出成功');
                    location.href = '/front/main.html';
                })
            },
        }
    })
</script>

</html>
